<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姚德秋">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        .contanter {
            width: 1400px;
            margin: 0 auto;
            height: 50px;
            /* display: flex; */
            /* justify-content:flex-start;  */
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul li {
            float: left;
            margin: 10px 10px;
        }
        /* .zy:hover{
             display: block;
         } */

        a {
            text-decoration: none;
            color: black;
        }

        .list-section li:hover {
            color: yellowgreen;
        }

        .frist-section li:hover {
            color: yellowgreen;
        }

        .last-section li:hover {
            color: yellowgreen;
        }

        .se-section li:hover {
            color: yellowgreen;
        }

        .gd-section li:hover {
            color: yellowgreen;
        }

        .list-section {
            margin-top: -3px;
            margin-left: -100px;
            display: none;
        }

        section {
            /* margin-top: 20px; */
            width: 270px;
            height: 180px;
            position: absolute;
            border: 1px solid black;
        }

        .frist-section {
            margin-left: -90px;
            margin-top: 20px;
            display: none;
        }

        .last-section {
            margin-left: -100px;
            display: none;
        }

        .se-section {
            margin-left: -80px;
            display: none;
        }

        .gd-section {
            width: 100px;
            height: 180px;
            position: absolute;
            border: 1px solid black;
            margin-left: -30px;
            display: none;
        }
    </style>
</head>

<body>
    <div class="contanter">
        <ul>
            <li><a style="color:blue;" href="#">首页</a></li>
            <li class="jj">
                <a href="#">
                    <section class="frist-section">
                        <ul>
                            <li>极限挑战 第...</li>
                            <li>极限挑战 第...</li>
                            <li>极限挑战 第...</li>
                            <li>极限挑战 第...</li>
                            <li>极限挑战 第...</li>
                            <li>极限挑战 第...</li>
                            <li>极限挑战 第...</li>
                            <li>极限挑战 第...</li>
                        </ul>

                    </section> 剧集</a>
            </li>
            <li class="dy"><a href="#">电影
                     <section class="last-section">
                <ul>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                </ul> 

              </section>     
           </a></li>
            <li class="zy"><a href="#">综艺
            <section class="list-section">
                <ul>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                </ul>
            </section>           
            </a></li>
            <li><a href="#">音乐</a></li>
            <li class="se"><a href="#">少儿
                  <section class="se-section">
                <ul>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                    <li>极限挑战 第...</li>
                </ul>
            </section>           </a></li>
            <li><a href="#">来疯</a></li>
            <li><a href="#">直播</a></li>
            <li><a href="#">片库</a></li>
            <li><a href="#">咨讯</a></li>
            <li><a href="#">纪实</a></li>
            <li><a href="#">公益</a></li>
            <li><a href="#">体育</a></li>
            <li><a href="#">汽车</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">财经</a></li>
            <li><a href="#">娱乐</a></li>
            <li><a href="#">文化</a></li>
            <li><a href="#">动漫</a></li>
            <li><a href="#">搞笑</a></li>
            <li><a href="#">旅游</a></li>
            <li><a href="#">时尚</a></li>
            <li><a href="#">亲子</a></li>
            <li><a href="#">教育</a></li>
            <li><a href="#">游戏</a></li>
            <li class="gd"><a href="#">更多
                <section class="gd-section">
                    <ul>
                        <li>更多规定</li>
                        <li>更多更多</li>
                        <li>更多更多</li>
                        <li>更多更多</li>
                    </ul>
                    </section></a></li>
        </ul>
    </div>
</body>

</html>
<script>
    var zy = document.querySelector(".zy")
    var lisSection = document.querySelector(".list-section")
    var jj = document.querySelector(".jj")
    var fst = document.querySelector(".frist-section")
    var dy = document.querySelector(".dy")
    var lst = document.querySelector(".last-section")
    var se = document.querySelector(".se")
    var set = document.querySelector(".se-section")
    var gd = document.querySelector(".gd")
    var gds = document.querySelector(".gd-section")
    zy.onmouseover = function () {
        lisSection.style.display = "block"
    }
    zy.onmouseout = function () {
        lisSection.style.display = "none"
    }
    lisSection.onmouseover = function () {
        lisSection.style.display = "block"
    }
    lisSection.onmouseout = function () {
        lisSection.style.display = "none"
    }
    jj.onmouseover = function () {
        fst.style.display = "block"
    }
    jj.onmouseout = function () {
        fst.style.display = "none"
    }
    fst.onmouseover = function () {
        fst.style.display = "block"
    }
    fst.onmouseout = function () {
        fst.style.display = "none"
    }
    dy.onmouseover = function () {
        lst.style.display = "block"
    }
    dy.onmouseout = function () {
        lst.style.display = "none"
    }
    lst.onmouseover = function () {
        lst.style.display = "block"
    }
    lst.onmouseout = function () {
        lst.style.display = "none"
    }
    se.onmouseover = function () {
        set.style.display = "block"
    }
    se.onmouseout = function () {
        set.style.display = "none"
    }
    set.onmouseover = function () {
        set.style.display = "block"
    }
    set.onmouseout = function () {
        set.style.display = "none"
    }
    gd.onmouseover = function () {
        gds.style.display = "block"
    }
    gd.onmouseout = function () {
        gds.style.display = "none"
    }
    gds.onmouseover = function () {
        gds.style.display = "block"
    }
    gds.onmouseout = function () {
        gds.style.display = "none"
    }

</script>